<template>
	<view>
		<swiper class="welcome-swiper">
			<swiper-item v-for="(item,index) in welcomeList ">
				<view>
					<image :src="item.images"></image>
					<view>
						{{item.title}}
					</view>
					<view>
						{{item.context}}
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup lang="ts">
import {ref} from "vue"
const actIdx = ref(0)
const welcomeList = [
	{
		"images":"../../static/images/welcome/cook1.png",
		"title":"厨房小白？手忙脚乱？",
		"context":"别担心！从切菜到火候控制，我们提供保姆级视频教程，让你第一次下厨就惊艳全场！"
	},
	{
		"images":"../../static/images/welcome/cook2.png",
		"title": "每天纠结'吃什么'？",
		"context": "智能推荐根据你的口味、食材和烹饪时长，生成专属菜谱推荐，从此告别选择困难！"
	},
	{
		"images":"../../static/images/welcome/cook3.png",
		"title":"厨房小白？手忙脚乱？",
		"context":"别担心！从切菜到火候控制，我们提供保姆级视频教程，让你第一次下厨就惊艳全场！"
	}
	
]
</script>

<style lang="scss">
page{
	background-color: #fff;
}  
.welcome-swiper{
	width: 600rpx;
	height: 800rpx;
	position: absolute;
	top:200upx;
	left:75upx;
	flex-direction: column;
	align-items: center; /* 子元素水平居中 */
	text-align: center; /* 文本居中 */
	background-color: rgba(255, 255, 255,0.8);
	border-radius:20upx;
	padding: 40upx;
	box-shadow: 2rpx 4rpx 12rpx rgba(0, 0, 0, 0.1);
	image{
		width: 500rpx;
		height: 500rpx;
	}
}

</style>
